<template>
  <div class="fixed z-30 right-5 top-60 w-16">
    <el-popover trigger="hover" placement="left-start" popper-class="pop-1">
      <ul class="block p-4 pr-8">
        <li class="flex items-center">
          <i class="text-lg el-icon-phone-outline"></i>
          <span class="font-medium ml-1">电话咨询</span>
        </li>
        <li class="text-red mt-[6px] font-light">售前咨询热线：4000-369-100</li>
        <li class="text-red mt-2 font-light">售后技术支持：4008-369-100</li>
      </ul>
      <div class="pop-box" slot="reference">
        <img src="@/assets/img/r1.png" alt="" />
        <span>电话咨询</span>
      </div>
    </el-popover>

    <div class="pop-box my-2" @click="$store.commit('SQ')">
      <img src="@/assets/img/r2.png" alt="" />
      <span>7天试用</span>
    </div>

    <el-popover trigger="hover" placement="left-start" popper-class="pop-1">
      <ul class="block p-4 pr-8">
        <li class="flex items-center">
          <i class="text-lg el-icon-message"></i>
          <span class="font-medium ml-1">公司邮箱</span>
        </li>
        <li class="text-red font-light">service@guoshenghuaxing.com</li>
        <li class="flex items-center mt-4">
          <img src="@/assets/img/wechat.png" class="w-5 h-5" />
          <span class="font-medium ml-1">微信公众号</span>
        </li>
        <li class="mt-2">
          <img class="w-28" src="@/assets/img/qr.jpg" alt="" />
        </li>
      </ul>
      <div class="pop-box" slot="reference">
        <img src="@/assets/img/r3.png" alt="" />
        <span>联系我们</span>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>

<style scoped>
.pop-1 {
  width: 274px;
  height: 127px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 0px 12px 0px rgba(99, 36, 37, 0.08);
}
.pop-box {
  width: 64px;
  height: 64px;
  font-size: 12px;
  cursor: pointer;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 0px 12px 0px rgba(99, 36, 37, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #c41719;
}
/deep/ .el-popover {
  padding: 30px 22px;
}
</style>